<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <template id="temp1">
        <li>姓名：{{name}}，电话：{{tel}}，性别：{{sex}}</li>
    </template>
    <h1>props参数</h1>
    <p>用于定义可以传入的参数</p>
    <main id="app">
        <ul>
            <my-li name="奉先" tel="13547811112" sex="男"></my-li>
            <my-li :name="name" :tel="tel" :sex="sex"></my-li>
        </ul>
    </main>
</body>
<script src="../vue.js"></script>
<script>

    new Vue({
        el: "#app",
        data() {
            return {
                name: "袁浩哲",
                tel: "13258176100",
                sex: "男",
            }
        },
        components: {
            // 组件名字：谨慎使用驼峰命名，推荐使用-命名。如果使用驼峰命名，DOM标签需要转化为-命名。
            "my-li": {
                // 该组件，可以接收name,age,sex三个参数
                // 接收参数的使用方式和普通data()参数一样
                props: ["name","tel","sex"],
                template: `#temp1`,
            }
        }
    })
</script>

</html>